<template>
  <div class="index-container">
    <div style="display: flex;margin-top: 18px;margin:auto" class="index-middle">
      <div style="margin:auto;width: 1200px;">
        <div style="display: flex;margin:auto;width: 1200px; margin-top: 0px; flex-shrink: 0;display: flex;">
          <!-- 中间图片轮播区域 -->
          <div style="width: 66%; height: 320px; margin-left: 16px;" >
            <el-carousel :interval="5000" arrow="always" width="726px" height="320px">
              <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                <img v-if="item.id" :name="item.name" :src="baseUrl + item.imageUrl" style="cursor: pointer;width:100%;height:100%" @click="navTo('/hj-home/news/detail/' + item.id)">
                <img v-else v-bind:src="item.imageUrl"/>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 公告 -->
          <div
            style="width:34%;height: 320px;box-shadow: 0 20px 12px 0 rgba(0,0,0,0.1)rgba(0,0,0,0.1);float: right;margin-left: 20px;"
          >
            <div solt="header" class="index-box-card-header">
              <span>
                <svg-icon slot="prefix" icon-class="gonggao" class="el-input__icon input-icon" /> 通知公告
              </span>
              <el-link
                style="float: right;margin-right: 0px;"
                :underline="false"
                type="text"
                @click="toNewTab('notes')"
              >更多 > >
              </el-link>
            </div>
            <div
              v-for="(item,index) in notesList"
              :key="index"
              style="display:flex;margin-top: 10px;"
              class="common-link"
              @click="navTo('/hj-home/notes/detail/'+item.id)"
            >
              <div style="width: 32px;height: 16px; text-align: center;">
                <span
                  class="common-icon"
                  style="margin-left: 6px; margin-bottom: 0px; display: inline-block; width: 8px; height: 8px;"
                />
              </div>
              <div
                style="width: 76%; font-size: 14px;line-height: 20px; font-weight: bold; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;"
              >{{ item.name }}
              </div>
              <div
                style="width: 20%;font-size: 14px; height: 16px; line-height: 23px;"
              >
                {{ item.createdAt&&item.createdAt.substring(0,10) }}
              </div>
            </div>
          </div>
        </div>
        <!-- 子系统 -->
        <div
          style="width: 1200px;height: 170px; margin-top: 12px; flex-shrink: 0; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);"
        >
          <div slot="header" class="index-box-card-header">
            <span><i class="el-icon-chat-dot-square" /> 快捷通道</span>
          </div>
          <div style="display: flex;">
            <div v-for="(item,index) in menulist" :key="index" @click="goToSubSystem(index+1)">
              <div class="function-area" :style="{background:item.background}">
                <div>
                  <img :src="item.pic">
                </div>
                <div class="tip">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 1200px;height: 357px; margin-top: 0px;display: flex;">
          <!-- 新闻信息 -->
          <div style="width:486px;height: 357px;box-shadow: 0 20px 12px 0 rgba(0,0,0,0.1);margin-top: 20px;">
            <div solt="header" class="index-box-card-header">
              <span>
                <i class="el-icon-news" />
                <!-- <svg-icon slot="prefix" icon-class="gonggao" class="el-input__icon input-icon" /> -->
                新闻信息
              </span>
              <el-link style="float: right;margin-right: 0px;" :underline="false" type="text" @click="toNewTab('news')">
                更多 > >
              </el-link>
            </div>
            <div
              v-for="(item,index) in newsList"
              :key="index"
              style="display:flex;margin-top: 20px;"
              class="common-link"
              @click="navTo('/hj-home/news/detail/'+item.id)"
            >
              <div style="width: 32px;height: 16px; text-align: center;">
                <span
                  class="common-icon"
                  style="margin-left: 6px; margin-bottom: 0px; display: inline-block; width: 8px; height: 8px;"
                />
              </div>
              <div
                style="display:block;width: 260px;font-size: 14px; height: 16px; line-height: 20px; font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"
              >{{ item.name }}
              </div>
              <div
                style="width: 80px; text-align: right; font-size: 14px; height: 16px; line-height: 16px;margin-right: 10px;"
              >
                {{ item.createdAt&& item.createdAt.substring(0,10) }}
              </div>
            </div>
          </div>
          <!-- 规章制度 -->
          <div
            style="width:486px;height: 357px;box-shadow: 0 20px 12px 0 rgba(0,0,0,0.1);margin-top: 20px;margin-left: 20px;"
          >
            <div solt="header" class="index-box-card-header">
              <span>
                <i class="el-icon-chat-line-square" />
                <!-- <svg-icon slot="prefix" icon-class="gonggao" class="el-input__icon input-icon" /> -->
                规章制度
              </span>
              <el-link
                style="float: right;margin-right: 0px;"
                :underline="false"
                type="text"
                @click="toNewTab('hcsmng')"
              >更多 > >
              </el-link>
            </div>
            <div
              v-for="(item,index) in hcsmngList"
              :key="index"
              style="display:flex;margin-top: 20px;"
              class="common-link"
              @click="navTo('/hj-home/hcsmng/detail/'+item.id)"
            >
              <div style="width: 32px;height: 16px; text-align: center;">
                <span
                  class="common-icon"
                  style="margin-left: 6px; margin-bottom: 0px; display: inline-block; width: 8px; height: 8px;"
                />
              </div>
              <div
                style="display:block;width: 260px;font-size: 14px; height: 16px; line-height: 20px; font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"
              >{{ item.name }}
              </div>
              <div
                style="width: 80px; text-align: right; font-size: 14px; height: 16px; line-height: 16px;margin-right: 10px;"
              >
                {{ item.createdAt&&item.createdAt.substring(0,10) }}
              </div>
            </div>
          </div>
          <div style="width: 486px;margin-left: 20px;">
            <!-- 链接 -->
            <div
              style="float: right;width: 100%;height: 357px;box-shadow: 0 20px 12px 0 rgba(0,0,0,0.1);margin-top: 20px;"
            >
              <div solt="header" class="index-box-card-header">
                <span>
                  <i class="el-icon-link" />
                  <!-- <svg-icon slot="prefix" icon-class="gonggao" class="el-input__icon input-icon" /> -->
                  友情链接
                </span>
              </div>
              <div
                v-for="(item,index) in linkList"
                :key="index"
                style="display:flex;margin-top: 10px;"
                class="common-link"
                @click="link(item.url)"
              >
                <div style="width: 32px;height: 16px; text-align: center;">
                  <span
                    class="common-icon"
                    style="margin-left: 6px; margin-bottom: 0px; display: inline-block; width: 8px; height: 8px;"
                  />
                </div>
                <div
                  style="display:block;width: 230px;font-size: 14px; height: 16px; line-height: 20px; font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"
                >{{ item.url }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSystemAPI
} from '@/api/system/menu.js'
import {
  getToken
} from '@/utils/auth'
import {
  newsList
} from '@/api/web/news.js'
import {
  notesList
} from '@/api/web/notes.js'
import {
  hcsmngList
} from '@/api/web/hcsmng.js'
import {
  linkList
} from '@/api/web/link.js'
import { changeMenus } from '@/router/changemenu.js'
export default {
  // name: 'Index',
  data() {
    return {
      queryForm: {
        page: 0,
        size: 8,
        sort: 'createdAt,desc'
      },
      menulist: [{
        background: '#58c358',
        name: ' 新风排风\n控制系统',
        pic: require('../../../../public/imgs/fengshan.png')
      },
      {
        background: '#9981d6',
        name: '实验室环境\n管理系统',
        pic: require('../../../../public/imgs/huanjing.png')
      }, {
        background: '#ff4040',
        name: '特殊气体\n报警系统',
        pic: require('../../../../public/imgs/fengshan.png')
      }, {
        background: '#e79174',
        name: '实验室出入\n管理系统',
        pic: require('../../../../public/imgs/apply.png')
      }, {
        background: '#59c9d5',
        name: '实验室安全\n监控系统',
        pic: require('../../../../public/imgs/jiankong.png')
      }, {
        background: '#d9c493',
        name: '仓库管理系统',
        pic: require('../../../../public/imgs/reagent.png')
      }, {
        background: '#005c8a',
        name: '实验废气排放\n监测管理系统',
        pic: require('../../../../public/imgs/qiti.png')
      }, {
        background: '#e38eff',
        name: '集中总控系统\n智能化信息平台',
        pic: require('../../../../public/imgs/bio_resource.png')
      }, {
        background: '#58c358',
        name: '实验冷链\n管理系统',
        pic: require('../../../../public/imgs/qiti.png')
      }
      ],
      newsList: [],
      hcsmngList: [],
      notesList: [],
      linkList: [],
      subSystemList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      bannerList:[],
    }
  },
  created() {
    this.getSystemList()
    this.queryList()
  },
  methods: {
    queryList() {
      newsList(this.queryForm).then(res => {
        this.newsList = res.content
        this.bannerList = this.newsList.filter(item=>item.imageUrl).map(item=>item={id:item.id,imageUrl:item.imageUrl}).slice(0,5)
        if(this.bannerList.length==0){
          this.bannerList=[{imageUrl:require("../../../assets/images/banner0.png")}]
        }
      })
      notesList({
        page: 0,
        size: 5,
        sort: 'createdAt,desc',
        }).then(res => {
        this.notesList = res.content
      })
      hcsmngList(this.queryForm).then(res => {
        this.hcsmngList = res.content
      })
      linkList(this.queryForm).then(res => {
        this.linkList = res.content
      })
    },
    toNewTab(name) {
      const routeData = this.$router.resolve({
        name
      })
      this.$router.push(routeData.href)
    },
    link(url) {
      window.open(url);
    },
    async getSystemList() {
      const { content } = await getSystemAPI()
      content.pop() //开发模块隐藏与打开
      this.$store.dispatch('app/setSystemList', content)
    },
    async goToSubSystem(id) {
      const sub = this.$store.state.app.systemList.find(item => item.id == id)
      if (getToken()) {
        this.$store.dispatch('app/changeSubSystem', sub)
        this.$store.commit('tagsView/visitedViewsDel')
        await changeMenus(id)
        if(this.$store.state.permission.addRouters[0].children){
          let path = this.$store.state.permission.addRouters[0].path+'/'+this.$store.state.permission.addRouters[0].children[0].path
           this.$router.push(path)
        }else {
          this.$message.error('您没有该系统进入权限')
        }

        // if(id===1){
        //   this.$router.push('/fumeHood/index')
        // }else if(id===2){
        //   this.$router.push('/sensor/index')
        // }else if(id===3){
        //   this.$router.push('/sensorPoison/index')
        // }else if(id===4){
        //   this.$router.push('/labSwipeCardRecord/index')
        // }else if(id===5){
        //   this.$router.push('/vidicon/index')
        // }else if(id===6){
        //   this.$router.push('/cabinet/index')
        // }else if(id===7){
        //   this.$router.push('/sensorVoc/index')
        // }else if(id===8){
        //   this.$router.push('/user/index')
        // }else if(id===9){
        //   this.$router.push('/refrigerator/index')
        // }
        // this.$router.push('/?sub_id=' + id)
        // window.open('/?sub_id=' + id, '_blank')
      } else {
        this.$message.error('请先登录！')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .index-container {
    position: relative;
    font-size: 15px;
    margin: 0 auto;
    // background: #f4f4f4;
    min-height: 100%;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .index-box-card-header {
    padding: 10px 10px;
    text-align: left;
    color: #ffffff;
    background-color: #2068b0;
    height: 35px;
  }

  .login-form {
    border-radius: 6px;
    height: 285px;
    box-shadow: 0 20px 12px 0 rgba(0, 0, 0, 0.1);

    .el-input {
      height: 38px;
      margin-top: 20px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 6px;
    }
  }

  .login-code {
    // float: right;
    width: 33%;
    display: inline-block;
    height: 38px;

    img {
      cursor: pointer;
      vertical-align: middle
    }
  }

  .user-do {
    font-size: 16px;
    margin-top: -10px;
    margin-bottom: 15px;

  }

  .user-do:first-child {
    color: #888888;
    margin-left: -40px;
  }

  .function-area {
    border-radius: 10px;
    border: 1px solid #ddd;
    transition: transform .5s ease-in-out;
    margin-left: 22px;
    width: 109px;
    height: 108px;
    margin-top: 10px;
    cursor: pointer;

    .tip {
      margin-top: -8px;
      font-size: 13px;
      color: white;
      text-align: center;
      word-break: keep-all;
      white-space: pre-line;
    }

    img {
      width: 50px;
      height: 50px;
      margin-top: 12px;
      margin-left: 30px;
    }
  }

  .function-area:hover {
    transform: translate(0, -5px);
    transition: transform .5s ease-in-out;
    box-shadow: 0 10px 20px 1px rgba(49, 49, 49, 0.2);
    border: 1px solid #FFFFFF;
  }

  .common-link {
    cursor: pointer;
  }

  .common-link:hover {
    color: #aa0000;

    .common-icon {
      background-color: #aa0000;
    }
  }

  .common-icon {
    background-color: #d5d2d1;
  }
</style>
